document.addEventListener("DOMContentLoaded", function() {

    var menu = document.getElementById("header-menu");
    var liElements = menu.getElementsByTagName("li");

    Array.forEach(liElements, function(element, index, array) {
        element.addEventListener("mouseover", function(e) {
            e.target.style.top = "20px";
        });
    });

});


callback-функция у нас - element.addEventListener("mouseover", function(e) {
            e.target.style.top = "20px";
        });


DOMContentLoaded - первый ивент;

var menu = document.getElementById("header-menu");
var liElements = menu.getElementsByTagName("li"); - первое событие;

addEventListener  - согластно ивенту DOMContentLoaded, ждет загружения DOM

function() {
    var menu = document.getElementById("header-menu");
    var liElements = menu.getElementsByTagName("li");


    ета функция не принимает никаких параметров, она просто выполняеться

    то-есть ета функция доступаеться с помощью getElementById к нашей менюшке header-menu, а затем доступаеться по
    getElementsByTagName ко всем li есть в header-menu

    ети все li вместе являються Array


    в итоге етой функции у нас есть переменная, она же Array с именем liElements;

затем мы задаем Array свойсто forEach и проходимся в цикле по всем его елементам, то-есть по всем li начиная с первой;


у нас у нас есть еще одна функция с параметрами element, index, array; - все они обьекты;

    element - обьект в котором есть информация об каждой li об ее координатах, ширыне и высоте и общей ширыне и высоте ее предка
    header-menu

    index - обьект в котором есть индекс каждой li;

    array - ето array всех наших li;

      callback-функция принимает один параметр element он нужен для mouseover что бы сверить координаты мышки и области li;

    mouseover как-бы имеет координаты нахождения мышки которые меняються если она движеться и наверное перехватываються и передаються нам браузером

    addEventListener как-бы распространяеться только на element, то-есть ничего не происходит если курсор мышки двигаеться где-то
    на странице кроме области header-menu;

    у нас есть element с координатами, а значит addEventListener ждет когда координаты курсор мышки совпадут с координатами
    области header-menu;

    если координаты совпали, значит курсор мышки находиться на header-menu, а значит находиться на какой-то li которую нам нужно найти

    для етого нам нужно пройтись в цикле


    итак. цикл проходиться по всем li и по всем получает обьект element;

    проходиться по первой li получает ее обьект element, получает все координаты области етой li и начинает свирять
    может ли быть здесь мыш, он же знает ее координаты с помощью браузера и mouseover

    если координаты не совпадают, а значит мышки в области етой li быть не может цикл начинает проверять следующую li

    итак пока не находит нужной

    итак, координаты области li и mouseover, тоесть мышки как-бы совпали - значит мыш находиться в области li етого и ждал addEventListener


    выполняеться функция

("mouseover", function(e) {
            e.target.style.top = "20px";
        });

    она принамает параметр е - то-есть li на которой есть мыш или li которую мы нашли пройдясь в цикле

    для етой li функция выполняет изменение стиля


    e.target.style.top = "20px";

    для етой li.target.style.top = "20px";
    
    цыкл завершен
